<template>
	<view>
		<view class="box">
			<view class="item flex-between">
				<view class="title">
					{{name}}
				</view>
				<view class="num">
					{{money1}}
				</view>
			</view>
		</view>
		<view class="item_nav">
			<view class="name">
				手机号
			</view>
			<input type="text" v-model="mobile" placeholder="请输入手机号" placeholder-class="input-place" />
		</view>
		<view class="item_nav">
			<view class="name">
				{{$t('wallet.name9')}}
			</view>
			<input type="number" v-model="money" :placeholder="$t('wallet.name10')" placeholder-class="input-place" />
		</view>
		<!-- <view class="item_nav">
			<view class="name">
				手续费
			</view>
			<view class="name">
				0.00
			</view>
		</view> -->
		<view class="" style="margin-top: 100rpx;padding: 0 30rpx;">
			<u-button type="primary" :loading="btnloading" :text="$t('vnode.name19')" color="#1e84f1" shape="circle"
				@click="fatherMethod"></u-button>
		</view>
		<!-- <button class="add-btn" @click="fatherMethod('add')">提交</button> -->
		<!-- <CButton :bg="'rgba(246, 246, 246, 1)'" :fatherMethod="fatherMethod" :text="'确认转换'"></CButton> -->
		<!-- <ourLoading isFullScreen :active="isShow" text="loading..." /> -->
		<pay-board ref="payJP" :showPrice='false' :showBoard="showBoard" @complete="complete"
			@closeBorad="showBoard = false"></pay-board>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				name1: '',
				money1: '',
				money: '',
				bname: '',
				bname1: '',
				id: '',
				mobile: '',
				btnloading: false,
				showBoard: false,
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t('wallet.name1')
			})
			this.name = option.name
			this.id = option.id
			this.$fun.ajax.post('config/recharge', {
				id: option.id
			}).then(res => {
				this.money1 = res.data.money
			})
		},
		methods: {
			complete(pass) {
				this.$fun.ajax.post('user/setPay', {
					paypwd: pass
				}).then(res => {
					this.$refs.payJP.password = ''
					if (res.code == 1) {
						this.showBoard = false
						this.upload()
					}
				})
			},
			async upload() {
				let params = {
					money: this.money,
					id: this.id,
					mobile: this.mobile,
				}
				await this.$fun.ajax.post('user/transfer', {
					...params
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						this.$fun.jump('', 4, 1200)
					}
				}).catch(() => {})
			},
			async fatherMethod() {
				let params = {
					money: this.money,
					id: this.id,
					mobile: this.mobile,
				}
				if (this.btnloading) return this.$fun.msg(this.$t('wallet.name11'))
				if (!this.mobile) return this.$fun.msg('请输入手机号')
				if (!this.money) return this.$fun.msg(this.$t('wallet.name13'))
				if (+this.money <= 0) return this.$fun.msg(this.$t('wallet.name14'))
				if (+this.money > +this.money1) return this.$fun.msg(this.$t('wallet.name14'))
				this.showBoard = true

			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 690rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin: 27rpx auto;
		display: flex;
		align-items: center;

		.item {
			margin: 46rpx 80rpx;
			text-align: center;
			width: 100%;

			.title {
				color: #52528C;
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 44rpx;
				line-height: 75rpx;
			}

			.num {
				color: #121212;
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 44rpx;
				line-height: 75rpx;
			}
		}

		image {
			width: 128rpx;
			height: 27rpx;
		}
	}

	.item_nav {
		width: 690rpx;
		height: 100rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		background: #FFFFFF;
		align-items: center;
		padding: 35rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
		margin-bottom: 2rpx;
		font-weight: bold;

		input {
			text-align: end;
		}

		.input-place {
			color: #CCCCCC;
			font-size: 28rpx;
			font-weight: 400;
		}
	}
</style>